<template>
  <div class="articleList">
    <Zhuanti 
      v-if="bloggerInfos.length>0" 
      v-for="(item,index) in bloggerInfos"
      :key="index"
      :bloggerInfo="item"
      class="articleList_item"
    />
    <div v-else>数据正在加载...</div>
  </div>
</template>
<script>
import Zhuanti from "./zhuanti"

export default {
  name: "ArticleList",
  data() {
    return {
      bloggerInfos: [],
      bloggerInfo:{}
    }
  },
  mounted() {
    var that = this;
    var flag = true;
    that.$axios.get("http://localhost:3000/api/articles?count=6")
    .then(res => {
      // console.log(res.data);
      that.bloggerInfos = res.data;
    })
    .catch(error => {
      console.log(new error(error))
    });

    // 加载更多处理
    window.addEventListener("scroll",function(){
      // console.log(document.documentElement.scrollTop);
      if(document.documentElement.scrollTop + window.innerHeight >= document.body.offsetHeight){
        if(flag==true){
          flag = false;
          that.$axios.get("http://localhost:3000/api/articles?count=6")
          .then(res => {
            // console.log(res.data);
            that.bloggerInfos = that.bloggerInfos.concat(res.data);
            flag = true;
          })
          .catch(error => {
            console.log(new error(error))
          });
        }
      }
    })
  },
  components: {
    Zhuanti
  }
}
</script>
<style lang="less" scoped>
  .articleList{
    position: relative;
    top: -70px;
    left: 0;
    width: 96%;
    margin: 30px auto 0;
  }
</style>


